﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>WhySoSerious_Asia</title>

<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/comon0.css">
</head>
<script>
	$(window).load(function(){  
		     setTimeout(waitsec,5000);//1000毫秒=1秒后执行test方法
             
            })  
       function waitsec() {
		$(".loading").fadeOut();
	}
			
/****/
$(document).ready(function(){
	var whei=$(window).width()
	$("html").css({fontSize:whei/20})
	$(window).resize(function(){
		var whei=$(window).width()
	 $("html").css({fontSize:whei/20})
});
	});
	</script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript">
function getTime() {
	 var datetime = new Date();
     var year=datetime.getFullYear();//获取完整的年份(4位,1970)
     var month=datetime.getMonth()+1;//获取月份(0-11,0代表1月,用的时候记得加上1)
     if(month<=9){
         month="0"+month;
     }
     var date=datetime.getDate();//获取日(1-31)
     if(date<=9){
         date="0"+date;
     }
     var dateformat=year+"-"+month+"-"+date;
     return dateformat;
}
	var ddd = new Date();
	var str111 = ddd.getFullYear()+"-"+(ddd.getMonth()+1)+"-"+ddd.getDate();
	//alert(str111);
	var url='operation/subscribe?id=tester&date='+getTime()+'&interval=5000&stationCountLimit=5&ipLimit=5';

	//var url='operation/subscribe?id=tester&date=2020-7-21&interval=5000&stationCountLimit=5&ipLimit=5';
	var source = new EventSource(url);
	var jsonData;
	// 监听收到服务器推送的一条记录
	source.onmessage = function (event) {
		//console.log(event.data);
		 jsonData=JSON.parse(event.data);
		 console.log(url);
		 console.log("马上输出-》"+jsonData.accessCountXData)
		 //document.getElementById('allVisitNum').innerHTML = eval(jsonData.ipCountYData.join('+'));
		 document.getElementById('allOperationNum').innerHTML = eval(jsonData.ipCountYData.join('+'));
		 console.log(event.data);

				echarts_1();
				echarts_2();
				echarts_4();
				echarts_31();
				echarts_32();
				echarts_33();
				echarts_5();
				echarts_6();
				function echarts_1() {
				        // 基于准备好的dom，初始化echarts实例
				        var myChart = echarts.init(document.getElementById('echart1'));
				        console.log("js.js->"+jsonData.accessCountXData);
				       option = {
				  //  backgroundColor: '#00265f',
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'shadow'
				        }
				    },
				    grid: {
				        left: '0%',
						top:'10px',
				        right: '0%',
				        bottom: '4%',
				       containLabel: true
				    },
				    xAxis: [{
				        type: 'category',
				      	data:jsonData.accessCountYData,	
				        //data: ['123', '1231', '房地产', '123务', '汽车销售', '旅游酒店', '五金建材'],
				        axisLine: {
				            show: true,
				         lineStyle: {
				                color: "rgba(255,255,255,.1)",
				                width: 1,
				                type: "solid"
				            },
				        },
						
				        axisTick: {
				            show: false,
				        },
						axisLabel:  {
				                interval: 0,
				               // rotate:50,
				                show: true,
				                splitNumber: 15,
				                textStyle: {
				 					color: "rgba(255,255,255,.6)",
				                    fontSize: '12',
				                },
				            },
				    }],
				    yAxis: [{
				        type: 'value',
				        axisLabel: {
				           //formatter: '{value} %'
							show:true,
							 textStyle: {
				 					color: "rgba(255,255,255,.6)",
				                    fontSize: '12',
				                },
				        },
				        axisTick: {
				            show: false,
				        },
				        axisLine: {
				            show: true,
				            lineStyle: {
				                color: "rgba(255,255,255,.1	)",
				                width: 1,
				                type: "solid"
				            },
				        },
				        splitLine: {
				            lineStyle: {
				               color: "rgba(255,255,255,.1)",
				            }
				        }
				    }],
				    series: [
						{
				        type: 'bar',
				        data:jsonData.accessCountXData,	
				        //data: [223, 300, 300, 900, 1500, 1200, 600],
				        barWidth:'35%', //柱子宽度
				       // barGap: 1, //柱子之间间距
				        itemStyle: {
				            normal: {
				                color:'#2f89cf',
				                opacity: 1,
								barBorderRadius: 5,
				            }
				        }
				    }
						
					]
				};
				      
				        // 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
				        window.addEventListener("resize",function(){
				            myChart.resize();
				        });
				    }
				function echarts_2() {
				        // 基于准备好的dom，初始化echarts实例
				        var myChart = echarts.init(document.getElementById('echart2'));

				       option = {
				  //  backgroundColor: '#00265f',
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: { type: 'shadow'}
				    },
				    grid: {
				        left: '0%',
						top:'10px',
				        right: '0%',
				        bottom: '4%',
				       containLabel: true
				    },
				    xAxis: [{
				        type: 'category',
				      		data: jsonData.stationCountXData,
				        axisLine: {
				            show: true,
				         lineStyle: {
				                color: "rgba(255,255,255,.1)",
				                width: 1,
				                type: "solid"
				            },
				        },
						
				        axisTick: {
				            show: false,
				        },
						axisLabel:  {
				                interval: 0,
				               // rotate:50,
				                show: true,
				                splitNumber: 15,
				                textStyle: {
				 					color: "rgba(255,255,255,.6)",
				                    fontSize: '12',
				                },
				            },
				    }],
				    yAxis: [{
				        type: 'value',
				        axisLabel: {
				           //formatter: '{value} %'
							show:true,
							 textStyle: {
				 					color: "rgba(255,255,255,.6)",
				                    fontSize: '12',
				                },
				        },
				        axisTick: {
				            show: false,
				        },
				        axisLine: {
				            show: true,
				            lineStyle: {
				                color: "rgba(255,255,255,.1	)",
				                width: 1,
				                type: "solid"
				            },
				        },
				        splitLine: {
				            lineStyle: {
				               color: "rgba(255,255,255,.1)",
				            }
				        }
				    }],
				    tooltip:{
				    	  formatter: function(params, ticket, callback) {
				              console.log(params);
				              return "站名:"+jsonData.stationCountNameData[params.dataIndex];
				          }
				    	
				    },
				    series: [
						{
				       	name: "站点",
				        type: 'bar',
				        data: jsonData.stationCountYData,
				        //data: [1500, 1200, 600, 200, 300, 300, 900],
				        barWidth:'35%', //柱子宽度
				       // barGap: 1, //柱子之间间距
				        itemStyle: {
				            normal: {
				                color:'#27d08a',
				                opacity: 1,
								barBorderRadius: 5,
				            }
				        }
				    }
						
					]
				};
				      
				        // 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
				        window.addEventListener("resize",function(){
				            myChart.resize();
				        });
				    }
				function echarts_5() {
				        // 基于准备好的dom，初始化echarts实例
				        var myChart = echarts.init(document.getElementById('echart5'));

				       option = {
				  //  backgroundColor: '#00265f',
				    tooltip: {
				        trigger: 'axis',
				        axisPointer: {
				            type: 'shadow'
				        }
				    },
				    
				    grid: {
				        left: '0%',
						top:'10px',
				        right: '0%',
				        bottom: '2%',
				       containLabel: true
				    },
				    xAxis: [{
				        type: 'category',
				      		data: jsonData.ipCountXData,
				        axisLine: {
				            show: true,
				         lineStyle: {
				                color: "rgba(255,255,255,.1)",
				                width: 1,
				                type: "solid"
				            },
				        },
						
				        axisTick: {
				            show: false,
				        },
						axisLabel:  {
				                interval: 0,
				               // rotate:50,
				                show: true,
				                splitNumber: 15,
				                textStyle: {
				 					color: "rgba(255,255,255,.6)",
				                    fontSize: '12',
				                },
				            },
				    }],
				    yAxis: [{
				        type: 'value',
				        axisLabel: {
				           //formatter: '{value} %'
							show:true,
							 textStyle: {
				 					color: "rgba(255,255,255,.6)",
				                    fontSize: '12',
				                },
				        },
				        axisTick: {
				            show: false,
				        },
				        axisLine: {
				            show: true,
				            lineStyle: {
				                color: "rgba(255,255,255,.1	)",
				                width: 1,
				                type: "solid"
				            },
				        },
				        splitLine: {
				            lineStyle: {
				               color: "rgba(255,255,255,.1)",
				            }
				        }
				    }],
				    series: [{
				        type: 'bar',
				        data: jsonData.ipCountYData,
				        barWidth:'35%', //柱子宽度
				       // barGap: 1, //柱子之间间距
				        itemStyle: {
				            normal: {
				                color:'#2f89cf',
				                opacity: 1,
								barBorderRadius: 5,
				            }
				        }
				    }
					]
				};
				      
				        // 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
				        window.addEventListener("resize",function(){
				            myChart.resize();
				        });
				    }
					
				function echarts_4() {
				        // 基于准备好的dom，初始化echarts实例
				        var myChart = echarts.init(document.getElementById('echart4'));
				        option = {
				        	    tooltip: {
				        	        trigger: 'item',
				        	        formatter: '{a} <br/>{b} : {c} ({d}%)'
				            },
				            visualMap: {
				                show: false,
				                min: 1,
				                max: 100,
				                inRange: {
				                    colorLightness: [0.3, 1]
				                }
				            },
				        		    
				            grid: {
				                left: '10',
				        		top: '30',
				                right: '10',
				                bottom: '10',
				                containLabel: true
				            },

				            
				            series: [
				                     {
				                         name: '站点',
				                         type: 'pie',
				                         radius: '55%',
				                         center: ['50%', '50%'],
				                         data: [
				                             {value:jsonData.stationCountYData[0], name: jsonData.stationCountNameData[0]},
				                             {value:jsonData.stationCountYData[1], name: jsonData.stationCountNameData[1]},
				                             {value:jsonData.stationCountYData[2], name: jsonData.stationCountNameData[2]},
				                             {value:jsonData.stationCountYData[3], name: jsonData.stationCountNameData[3]},
				                             {value:jsonData.stationCountYData[4], name: jsonData.stationCountNameData[4]}
				                         ].sort(function (a, b) { return a.value - b.value; }),
				                         roseType: 'radius',
				                         label: {
				                             color: 'rgba(255, 255, 255, 0.3)'
				                         },
				                         labelLine: {
				                             lineStyle: {
				                                 color: 'rgba(255, 255, 255, 0.3)'
				                             },
				                             smooth: 0.2,
				                             length: 10,
				                             length2: 20
				                         },
				                         itemStyle: {
				                             color: '#c23531',
				                             shadowBlur: 200,
				                             shadowColor: 'rgba(0, 0, 0, 0.5)'
				                         },

				                         animationType: 'scale',
				                         animationEasing: 'elasticOut',
				                         animationDelay: function (idx) {
				                             return Math.random() * 200;
				                         }
				                     }
				                 ]

				        };
				      
				        // 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
				        window.addEventListener("resize",function(){
				            myChart.resize();
				        });
				    }
				function echarts_6() {
				        // 基于准备好的dom，初始化echarts实例
				        var myChart = echarts.init(document.getElementById('echart6'));

				        var dataStyle = {
					normal: {
						label: {
							show: false
						},
						labelLine: {
							show: false
						},
						//shadowBlur: 40,
						//shadowColor: 'rgba(40, 40, 40, 1)',
					}
				};
				var placeHolderStyle = {
					normal: {
						color: 'rgba(255,255,255,.05)',
						label: {show: false,},
						labelLine: {show: false}
					},
					emphasis: {
						color: 'rgba(0,0,0,0)'
					}
				};
				option = {
					color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
					tooltip: {
						show: true,
						formatter: "{a} : {c} "
					},
					legend: {
						itemWidth: 10,
				        itemHeight: 10,
						itemGap: 12,
						bottom: '3%',
						
						data: ['浙江', '上海', '广东', '北京', '深圳'],
						textStyle: {
				                    color: 'rgba(255,255,255,.6)',
				                }
					},
					
					series: [
						{
						name: '浙江',
						type: 'pie',
						clockWise: false,
						center: ['50%', '42%'],
						radius: ['59%', '70%'],
						itemStyle: dataStyle,
						hoverAnimation: false,
						data: [{
							value: 80,
							name: '01'
						}, {
							value: 20,
							name: 'invisible',
							tooltip: {show: false},
							itemStyle: placeHolderStyle
						}]
					},
						{
						name: '上海',
						type: 'pie',
						clockWise: false,
						center: ['50%', '42%'],
						radius: ['49%', '60%'],
						itemStyle: dataStyle,
						hoverAnimation: false,
						data: [{
							value: 70,
							name: '02'
						}, {
							value: 30,
							name: 'invisible',
							tooltip: {show: false},
							itemStyle: placeHolderStyle
						}]
					}, 
						{
						name: '广东',
						type: 'pie',
						clockWise: false,
						hoverAnimation: false,
						center: ['50%', '42%'],
						radius: ['39%', '50%'],
						itemStyle: dataStyle,
						data: [{
							value: 65,
							name: '03'
						}, {
							value: 35,
							name: 'invisible',
							tooltip: {show: false},
							itemStyle: placeHolderStyle
						}]
					},
						{
						name: '北京',
						type: 'pie',
						clockWise: false,
						hoverAnimation: false,
						center: ['50%', '42%'],
						radius: ['29%', '40%'],
						itemStyle: dataStyle,
						data: [{
							value: 60,
							name: '04'
						}, {
							value: 40,
							name: 'invisible',
							tooltip: {show: false},
							itemStyle: placeHolderStyle
						}]
					}, 
						{
						name: '深圳',
						type: 'pie',
						clockWise: false,
						hoverAnimation: false,
						center: ['50%', '42%'],
						radius: ['20%', '30%'],
						itemStyle: dataStyle,
						data: [{
							value: 50,
							name: '05'
						}, {
							value: 50,
							name: 'invisible',
							tooltip: {show: false},
							itemStyle: placeHolderStyle
						}]
					}, ]
				};
				      
				        // 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
				        window.addEventListener("resize",function(){
				            myChart.resize();
				        });
				    }
				function echarts_31() {
				        // 基于准备好的dom，初始化echarts实例
				        var myChart = echarts.init(document.getElementById('fb1')); 
				option = {
				   
					    title: [{
				        text: '用户操作分布',
				        left: 'center',
				        textStyle: {
				            color: '#fff',
							fontSize:'16'
				        }

				    }],
				    tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b}: {c} ({d}%)",
				position:function(p){   //其中p为当前鼠标的位置
				            return [p[0] + 10, p[1] - 10];
				        }
				    },
				    legend: {
				        
				top:'70%',
				       itemWidth: 10,
				        itemHeight: 10,
				        data:jsonData.accessCountYData,
				                textStyle: {
				            color: 'rgba(255,255,255,.5)',
							fontSize:'12',
				        }
				    },
				    series: [
				        {
				        	name:'用户操作分布',
				            type:'pie',
							center: ['50%', '42%'],
				            radius: ['40%', '60%'],
				                  color: ['#66ffff', '#66ccff', '#6699ff', '#6666ff'],	
				            label: {show:false},
							labelLine: {show:false},
				            data:[
				                {value:jsonData.accessCountXData[0], name:jsonData.accessCountYData[0]},
				                {value:jsonData.accessCountXData[1], name:jsonData.accessCountYData[1]},
				                {value:jsonData.accessCountXData[2], name:jsonData.accessCountYData[2]},
				            ]
				        }
				    ]
				};
				      
				        // 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
				        window.addEventListener("resize",function(){
				            myChart.resize();
				        });
				    }
				function echarts_32() {
				        // 基于准备好的dom，初始化echarts实例
				        var myChart = echarts.init(document.getElementById('fb2'));
				option = {
				   
					    title: [{
				        text: '站点被点击量',
				        left: 'center',
				        textStyle: {
				            color: '#fff',
							fontSize:'16'
				        }

				    }],
				    tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b}: {c} ({d}%)",
				position:function(p){   //其中p为当前鼠标的位置
				            return [p[0] + 10, p[1] - 10];
				        }
				    },
				    legend: {
				        
				    top:'70%',
				       itemWidth: 10,
				        itemHeight: 10,
				        data:jsonData.stationCountNameData,
				                textStyle: {
				           color: 'rgba(255,255,255,.5)',
							fontSize:'12',
				        }
				    },
				    series: [
				        {
				        	name:'站点被点击量',
				            type:'pie',
							center: ['50%', '42%'],
				            radius: ['40%', '60%'],
				            color: ['#66ffff', '#66ccff', '#6699ff', '#6666ff','#6633ff'],	
				            label: {show:false},
							labelLine: {show:false},
				            data:[
				                {value:jsonData.stationCountYData[0], name:jsonData.stationCountNameData[0]},
				                {value:jsonData.stationCountYData[1], name:jsonData.stationCountNameData[1]},
				                {value:jsonData.stationCountYData[2], name:jsonData.stationCountNameData[2]},
				                {value:jsonData.stationCountYData[3], name:jsonData.stationCountNameData[3]},
				                {value:jsonData.stationCountYData[4], name:jsonData.stationCountNameData[4]},
				            ]
				        }
				    ]
				};
				      
				        // 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
				        window.addEventListener("resize",function(){
				            myChart.resize();
				        });
				    }
				function echarts_33() {
				        // 基于准备好的dom，初始化echarts实例
				        var myChart = echarts.init(document.getElementById('fb3'));
				option = {
					    title: [{
				        text: '用户IP访问量',
				        left: 'center',
				        textStyle: {
				            color: '#fff',
							fontSize:'16'
				        }

				    }],
				    tooltip: {
				        trigger: 'item',
				        formatter: "{a} <br/>{b}: {c} ({d}%)",
				position:function(p){   //其中p为当前鼠标的位置
				            return [p[0] + 10, p[1] - 10];
				        }
				    },
				    legend: {
				    top:'70%',
				       itemWidth: 10,
				        itemHeight: 10,
				        data:jsonData.ipCountXData,
				                textStyle: {
				            color: 'rgba(255,255,255,.5)',
							fontSize:'12',
				        }
				    },
				    series: [
				        {
				        	name:'用户IP访问量',
				            type:'pie',
							center: ['50%', '42%'],
				            radius: ['40%', '60%'],
				                   color: ['#66ffff', '#66ccff', '#6699ff', '#6666ff','#6633ff'],	
				            label: {show:false},
							labelLine: {show:false},
				            data:[
				                {value:jsonData.ipCountYData[0], name:jsonData.ipCountXData[0]},
				                {value:jsonData.ipCountYData[1], name:jsonData.ipCountXData[1]},
				                {value:jsonData.ipCountYData[2], name:jsonData.ipCountXData[2]},
				                {value:jsonData.ipCountYData[3], name:jsonData.ipCountXData[3]},
				                {value:jsonData.ipCountYData[4], name:jsonData.ipCountXData[4]},
				                {value:jsonData.ipCountYData[5], name:jsonData.ipCountXData[5]},
				            ]
				        }
				    ]
				};
				      
				        // 使用刚指定的配置项和数据显示图表。
				        myChart.setOption(option);
				        window.addEventListener("resize",function(){
				            myChart.resize();
				        });
				    }
	}
	<!-- 添加一个开启回调 -->
	source.onopen = function (event) {
	    console.log("浏览器与服务器SSE连接开启");
	};

	</script>
<body>
	<div class="canvas" style="opacity: .2">
		<iframe frameborder="0" src="js/index.html"
			style="width: 100%; height: 100%"></iframe>
	</div>
	<div class="loading">
		<div class="loadbox">
			<img src="picture/loading.gif"> 数据加载中...
		</div>
	</div>
	<div class="head">
		<h1>地图服务后台数据大屏</h1>
		<div class="weather">
			<span id="showTime"></span>
		</div>

		<script>
	var t = null;
    t = setTimeout(time,1000);//開始运行
    function time()
    {
       clearTimeout(t);//清除定时器
       dt = new Date();
		var y=dt.getFullYear();
		var mt=dt.getMonth()+1;
		var day=dt.getDate();
       var h=dt.getHours();//获取时
       var m=dt.getMinutes();//获取分
       var s=dt.getSeconds();//获取秒
       document.getElementById("showTime").innerHTML = y+"年"+mt+"月"+day+"-"+h+"时"+m+"分"+s+"秒";
       t = setTimeout(time,1000); //设定定时器，循环运行     
    } 

</script>




	</div>
	<div class="mainbox">
		<ul class="clearfix">
			<li>
				<div class="boxall" style="height: 3.2rem">
					<div class="alltitle">用户操作量</div>
					<div class="allnav" id="echart1"></div>
					<div class="boxfoot"></div>
				</div>
				<div class="boxall" style="height: 3.2rem">
					<div class="alltitle">站点被点击量</div>
					<div class="allnav" id="echart2"></div>
					<div class="boxfoot"></div>
				</div>

			</li>
			<li>
				<div class="bar">
					<div class="barbox">
						<ul class="clearfix">
							<li class="pulll_left counter" id="allOperationNum">0</li>
							<!-- 
							<li class="pulll_left counter" id="allVisitNum">0</li>
							-->
						</ul>
					</div>
					<div class="barbox2">
						<ul class="clearfix">
							<li class="pulll_left">总操作数量</li>
							<!-- 
							<li class="pulll_left">总访问数量</li>
							 -->
						</ul>
					</div>
				</div>

				<div class="map">
					<div class="map1">
						<img src="picture/lbx.png">
					</div>
					<div class="map2">
						<img src="picture/jt.png">
					</div>
					<div class="map3">
						<img src="picture/map.png">
					</div>

					<div class="boxall" style="height: 7rem">
						<div style="height: 100%; width: 100%;">
							<div class="sy" id="fb1"></div>
							<div class="sy" id="fb2"></div>
							<div class="sy" id="fb3"></div>
						</div>
						-->
						<div class="boxfoot"></div>
					</div>
				</div>
			</li>
			<li>
				<div class="boxall" style="height: 3.4rem">
					<div class="alltitle">站点点击比例</div>
					<div class="allnav" id="echart4"></div>
					<div class="boxfoot"></div>
				</div>
				<div class="boxall" style="height: 3.2rem">
					<div class="alltitle">用户IP访问量</div>
					<div class="allnav" id="echart5"></div>
					<div class="boxfoot"></div>
				</div> <!--  <div class="boxall" style="height: 3rem">
        <div class="alltitle">模块标题样式</div>
        <div class="allnav" id="echart6"></div>
        <div class="boxfoot"></div>
      </div>
      -->
			</li>
		</ul>
	</div>
	<div class="back"></div>


	<script type="text/javascript" src="js/china.js"></script>
	<!--  <script type="text/javascript" src="js/area_echarts.js"></script> -->
</body>
</html>
